<?xml version="1.0" encoding="utf-8"?>
<!--
                                                                                     
 h       t     t                ::       /     /                     t             / 
 h       t     t                ::      //    //                     t            // 
 h     ttttt ttttt ppppp sssss         //    //  y   y       sssss ttttt         //  
 hhhh    t     t   p   p s            //    //   y   y       s       t          //   
 h  hh   t     t   ppppp sssss       //    //    yyyyy       sssss   t         //    
 h   h   t     t   p         s  ::   /     /         y  ..       s   t    ..   /     
 h   h   t     t   p     sssss  ::   /     /     yyyyy  ..   sssss   t    ..   /     
                                                                                     
	<https://y.st./>
	Copyright © 2017 Alex Yst <mailto:copyright@y.st>

	This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	GNU General Public License for more details.

	You should have received a copy of the GNU General Public License
	along with this program. If not, see <https://www.gnu.org./licenses/>.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<base href="https://y.st./en/coursework/CS2205/Markup_validation.xhtml" />
		<title>Markup validation &lt;https://y.st./en/coursework/CS2205/Markup_validation.xhtml&gt;</title>
		<link rel="icon" type="image/png" href="/link/CC_BY-SA_4.0/y.st./icon.png" />
		<link rel="stylesheet" type="text/css" href="/link/basic.css" />
		<link rel="stylesheet" type="text/css" href="/link/site-specific.css" />
		<script type="text/javascript" src="/script/javascript.js" />
		<meta name="viewport" content="width=device-width" />
	</head>
	<body>
		<nav>
			<p>
				<a href="/en/">Home</a> |
				<a href="/en/a/about.xhtml">About</a> |
				<a href="/en/a/contact.xhtml">Contact</a> |
				<a href="/a/canary.txt">Canary</a> |
				<a href="/en/URI_research/"><abbr title="Uniform Resource Identifier">URI</abbr> research</a> |
				<a href="/en/opinion/">Opinions</a> |
				<a href="/en/coursework/">Coursework</a> |
				<a href="/en/law/">Law</a> |
				<a href="/en/a/links.xhtml">Links</a> |
				<a href="/en/coursework/CS2205/Markup_validation.xhtml.asc">{this page}.asc</a>
			</p>
			<hr/>
			<p>
				<a href="/en/coursework/BUS1101/" title="Principles of Business Management">BUS 1101</a> |
				<span class="hyperlink_unavailable" title="Basic Accounting">BUS 1102</span> |
				<span class="hyperlink_unavailable" title="Principles of Marketing">BUS 2201</span> |
				<span class="hyperlink_unavailable" title="Multinational Management">BUS 2207</span> |
				<span class="hyperlink_unavailable" title="Business and Society">BUS 3306</span> |
				<a href="/en/coursework/CS1101/" title="Programming Fundamentals">CS 1101</a> |
				<a href="/en/coursework/CS1102/" title="Programming 1">CS 1102</a> |
				<a href="/en/coursework/CS1103/" title="Programming 2">CS 1103</a> |
				<span class="hyperlink_unavailable" title="Computer Systems">CS 1104</span> |
				<a href="/en/coursework/CS2203/" title="Databases 1">CS 2203</a> |
				<span class="hyperlink_unavailable" title="Communications and Networking">CS 2204</span> |
				<a href="/en/coursework/CS2205/" title="Web Programming 1">CS 2205</a> |
				<a href="/en/coursework/CS2301/" title="Operating Systems 1">CS 2301</a> |
				<span class="hyperlink_unavailable" title="Software Engineering 1">CS 2401</span> |
				<span class="hyperlink_unavailable" title="Data Structures">CS 3303</span> |
				<span class="hyperlink_unavailable" title="Analysis of Algorithms">CS 3304</span> |
				<span class="hyperlink_unavailable" title="Web Programming 2">CS 3305</span> |
				<span class="hyperlink_unavailable" title="Databases 2">CS 3306</span> |
				<span class="hyperlink_unavailable" title="Operating Systems 2">CS 3307</span> |
				<span class="hyperlink_unavailable" title="Information Retrieval">CS 3308</span> |
				<span class="hyperlink_unavailable" title="Comparative Programming Languages">CS 4402</span> |
				<span class="hyperlink_unavailable" title="Software Engineering 2">CS 4403</span> |
				<span class="hyperlink_unavailable" title="Advanced Networking and Data Security">CS 4404</span> |
				<span class="hyperlink_unavailable" title="Mobile Applications">CS 4405</span> |
				<span class="hyperlink_unavailable" title="Computer Graphics">CS 4406</span> |
				<span class="hyperlink_unavailable" title="Data Mining and Machine Learning">CS 4407</span> |
				<span class="hyperlink_unavailable" title="Artificial Intelligence">CS 4408</span> |
				<span class="hyperlink_unavailable" title="English Composition 2">ENGL 1102</span> |
				<span class="hyperlink_unavailable" title="World Literature">ENGL 1405</span> |
				<span class="hyperlink_unavailable" title="Introduction to Environmental Science">ENVS 1301</span> |
				<a href="/en/coursework/HIST1421/" title="Greek and Roman Civilization">HIST 1421</a> |
				<span class="hyperlink_unavailable" title="College Algebra">MATH 1201</span> |
				<span class="hyperlink_unavailable" title="Calculus">MATH 1211</span> |
				<span class="hyperlink_unavailable" title="Introduction to Statistics">MATH 1280</span> |
				<span class="hyperlink_unavailable" title="Discrete Mathematics">MATH 1302</span> |
				<span class="hyperlink_unavailable" title="Introduction to Philosophy">PHIL 1402</span> |
				<a href="/en/coursework/PHIL1404/" title="Ethics and Social Responsibility">PHIL 1404</a> |
				<a href="/en/coursework/POLS1503/" title="Globalization">POLS 1503</a> |
				<span class="hyperlink_unavailable" title="Introduction to Psychology">PSYC 1504</span> |
				<a href="/en/coursework/UNIV1001/" title="Online Education Strategies">UNIV 1001</a>
			</p>
			<hr/>
			<p>
				<a href="/en/coursework/CS2205/Markup_validation.xhtml" title="Markup validation">Unit 1</a>
			</p>
			<hr/>
		</nav>
		<header>
			<h1>Markup validation</h1>
			<p>Written in <span title="Web Programming 1">CS 2205</span> of <a href="http://www.uopeople.edu/">University of the People</a>, finalised on 2017-09-13</p>
		</header>
<p>
	The main tool I used to use for markup validation was the <abbr title="World Wide Web Consortium">W3C</abbr>&apos;s <a href="https://validator.w3.org/">main validation tool</a>.
	However, that tool has some issues.
	First, it cannot load pages from servers that make use of <abbr title="Server Name Indication">SNI</abbr>.
	I&apos;m not sure why not, as servers that support <abbr title="Server Name Indication">SNI</abbr> tend to also accept requests without it, so it baffles me that this validation tool somehow chokes when it comes to those servers.
	Second, this tool doesn&apos;t handle <abbr title="Hypertext Markup Language">HTML</abbr>5 or <abbr title="Hypertext Markup Language">HTML</abbr> 5.1, and can only validate pages written in an older version of <abbr title="Hypertext Markup Language">HTML</abbr> or <abbr title="Extensible Hypertext Markup Language">XHTML</abbr>.
	Now, I instead use their experimental <a href="https://validator.w3.org/nu/">Nu validator</a>.
</p>
<h2><a href="https://validator.w3.org/nu/?useragent=Validator.nu%2FLV+http%3A%2F%2Fvalidator.w3.org%2Fservices&amp;acceptlanguage=&amp;doc=https%3A%2F%2Fwww.uopeople.edu%2F">University of the People&apos;s website</a></h2>
<p>
	Our university is teaching us the importance of Web standards, so you&apos;d think their own website would pass inspection, right?
	Nope.
	Most websites aren&apos;t properly written, and University of the People&apos;s is no exception.
</p>
<p>
	The main error present is the lack of an <code>alt</code> attribute on several <code>&lt;img/&gt;</code> tags.
	This attribute is <strong>*mandatory*</strong> for most <code>&lt;img/&gt;</code> tags.
	I thought <strong>*all*</strong> <code>&lt;img/&gt;</code> tags required it, but according to the validator, there are some cases in which they&apos;re not needed.
	However, the missing attribute in these <code>&lt;img/&gt;</code> tags isn&apos;t one of those cases; otherwise the validator wouldn&apos;t be throwing errors.
	This is a pretty common mistake made on the Web.
	Another common theme in the error list is the presence of <code>&lt;div/&gt;</code> tags nested within <code>&lt;h1/&gt;</code> and <code>&lt;h2/&gt;</code> tags.
	<code>&lt;h1/&gt;</code> and <code>&lt;h2/&gt;</code> tags are supposed to contain inline elements, not block elements, so <code>&lt;div/&gt;</code> tags don&apos;t belong there.
	Some <code>&lt;h2/&gt;</code> tags are nested within <code>&lt;span/&gt;</code> tags as well, causing more errors.
	Like <code>&lt;h1/&gt;</code> and <code>&lt;h2/&gt;</code> tags, <code>&lt;span/&gt;</code> tags contain only inline elements.
	While <code>&lt;h1/&gt;</code> and <code>&lt;h2/&gt;</code> tags <strong>*contain*</strong> inline elements, they <strong>*are*</strong> block elements, so they don&apos;t belong within a <code>&lt;span/&gt;</code> tag.
	In general, the home page of the university shows a frequent misuse of heading tags.
	A <code>&lt;style/&gt;</code> tag is also out of place, being in the <code>&lt;body/&gt;</code> instead of the <code>&lt;head/&gt;</code>.
	The <code>&lt;meta/&gt;</code> tag has an invalid <code>content</code> attribute value, and the deprecated <code>border</code> attribute is used in a couple places.
	The validator presents a few non-error warnings worth taking into consideration as well.
	The language of the document isn&apos;t specified in the <code>&lt;html/&gt;</code> tag&apos;s <code>lang</code> attribute, the page disables user zooming, and one of the headings is empty.
	In general, this is a pretty messy page.
	I will say this though: at least the page appears to be well-formed, which I wasn&apos;t expecting.
	Tags and attributes are misused and misplaced, but there are no syntax errors.
</p>
<p>
	Aside from the validator errors and warnings, I&apos;d say the main thing that doesn&apos;t work well on the page is the use of JavaScript to run the videos.
	Videos are plenty capable of running on a webpage without JavaScript, and requiring JavaScript makes the page less accessible to people with different browser set-ups.
	Other than that, the page seems to be in good working order to me.
</p>
<h2><a href="https://validator.w3.org/nu/?useragent=Validator.nu%2FLV+http%3A%2F%2Fvalidator.w3.org%2Fservices&amp;acceptlanguage=&amp;doc=http%3A%2F%2Ffloraverse.com%2F">Floraverse</a></h2>
<p>
	Floraverse is one of two comics I read, the other being one that updates so infrequently that I never know when to expect a new page.
	I wasn&apos;t expecting it, but their markup is incredibly clean.
	They do have one reoccurring error though: missing <code>alt</code> attributes on their <code>&lt;img/&gt;</code> tags.
	Again, this is an incredibly common error and most people don&apos;t seem to realise that the <code>alt</code> attribute isn&apos;t optional, but <strong>*mandatory*</strong>.
	The validator also throws out some warnings requesting heading tags be used within the <code>&lt;section/&gt;</code> elements, but these are just very good suggestions and not requirements.
</p>
<p>
	The comments section doesn&apos;t function without JavaScript, though.
	This is a big accessibility problem.
	Additionally, the heavy use of images makes non-graphical browsing of the site pointless.
	That said, it&apos;s a Web comic.
	What can you expect?
	The comments section should be cleaned up, but as for the heavy image use, it&apos;s sort of the whole point of the site.
	There&apos;s no need to fix that, aside from adding <code>alt</code> attributes where they belong.
</p>
<h2><a href="https://validator.w3.org./nu/?useragent=Validator.nu%2FLV+http%3A%2F%2Fvalidator.w3.org%2Fservices&amp;acceptlanguage=&amp;doc=https%3A%2F%2Fy.st.%2F">My own website</a></h2>
<p>
	We can&apos;t discuss website validation without considering the validation of our own websites.
	Personally, I&apos;m a stickler for standards, and as a result, my website&apos;s markup is flawless.
	In fact, every page of my website has a link in the footer to the <abbr title="World Wide Web Consortium">W3C</abbr> validator with the appropriate query string to tell the validator to display the validation results for that particular page.
	The validator has neither any errors nor any warnings to present.
</p>
<p>
	I also do my best to make my site incredibly accessible.
	I use a very simple layout.
	There&apos;s a little JavaScript, but the site works perfectly well without it; the JavaScript&apos;s just a navigation aid, allowing the user to use the left and right arrow keys on certain pages to load the previous and next pages, respectively.
	Even if JavaScript&apos;s disabled though, it works because actual <code>&lt;a/&gt;</code> tags are provided in the navigation menu to get to both adjacent pages (in fact, the JavaScript is set up to read the <abbr title="Uniform Resource Identifier">URI</abbr>s from those tags to know where to send the user, so the content of those tags is identical to what the user gets from the JavaScript).
	That doesn&apos;t mean my site&apos;s without issue though.
	There are at least two problems.
	Most noticeably, the site makes use of a <abbr title="Transport Layer Security">TLS</abbr> certificate issued by a certificate &quot;authority&quot; blacklisted by Mozilla.
	Mozilla-based browsers therefore refuse to load my website at all.
	However, I can&apos;t afford a commercial <abbr title="Transport Layer Security">TLS</abbr> certificate, so I don&apos;t have any option to replace it until I find another certificate &quot;authority&quot; that gives out decent and gratis certificates.
	Most browsers offer you a way to bypass the certificate issue if you choose to, but Mozilla-based browser refuse to provide this option for websites using certificates issued by my provider.
	This is a problem in Mozilla-based browsers, not my website, and there&apos;s nothing I can do about it.
	The second issue is triggered by a bug in some browsers.
	Some browsers ignore the <code>Content-Type</code> header, and in doing so, assume my pages are written in <abbr title="Hypertext Markup Language">HTML</abbr> of some sort.
	They&apos;re not.
	They&apos;re written in <abbr title="Extensible Hypertext Markup Language">XHTML</abbr> 5.1.
	When rendered as <abbr title="Hypertext Markup Language">HTML</abbr>, my pages appear blank; they <strong>*must*</strong> be rendered in <abbr title="Extensible Hypertext Markup Language">XHTML</abbr> to display their content properly.
	This is an uncommon bug though, and I&apos;ve only heard of it happening in old versions of the Links browser.
	Other browsers and newer versions of that browser don&apos;t have that problem.
</p>
		<hr/>
		<p>
			Copyright © 2017 Alex Yst;
			You may modify and/or redistribute this document under the terms of the <a rel="license" href="/license/gpl-3.0-standalone.xhtml"><abbr title="GNU&apos;s Not Unix">GNU</abbr> <abbr title="General Public License version Three or later">GPLv3+</abbr></a>.
			If for some reason you would prefer to modify and/or distribute this document under other free copyleft terms, please ask me via email.
			My address is in the source comments near the top of this document.
			This license also applies to embedded content such as images.
			For more information on that, see <a href="/en/a/licensing.xhtml">licensing</a>.
		</p>
		<p>
			<abbr title="World Wide Web Consortium">W3C</abbr> standards are important.
			This document conforms to the <a href="https://validator.w3.org./nu/?doc=https%3A%2F%2Fy.st.%2Fen%2Fcoursework%2FCS2205%2FMarkup_validation.xhtml"><abbr title="Extensible Hypertext Markup Language">XHTML</abbr> 5.1</a> specification and uses style sheets that conform to the <a href="http://jigsaw.w3.org./css-validator/validator?uri=https%3A%2F%2Fy.st.%2Fen%2Fcoursework%2FCS2205%2FMarkup_validation.xhtml"><abbr title="Cascading Style Sheets">CSS</abbr>3</a> specification.
		</p>
	</body>
</html>

